import { Button, Form, Input, message } from 'antd'
import React from 'react'
import { login } from '~/api/login'

interface LoginUser {
    username: string
    password: string
}
async function onFinish(values: LoginUser) {
    console.log(values)
    try {
        const res = await login(values.username, values.password)
        if (res) {
            message.success('登录成功')
            window.location.href = '/'
        }
        console.log('res ===>', res)
    }
    catch (error) {
        console.log('error ===>', error)
    }
}

const layout1 = {
    labelCol: { span: 4 },
    wrapperCol: { span: 20 },
}

const layout2 = {
    labelCol: { span: 0 },
    wrapperCol: { span: 24 },
}

export default function Login() {
    return (
        <div className="text-16px ">
            <div className="mx-auto w-30% min-w-300px">
                <div className="text-center text-32px mb-20px">图书管理系统</div>
                <Form {...layout1} onFinish={onFinish} colon={false} autoComplete="off">
                    <Form.Item label="用户名" name="username" rules={[{ required: true, message: '请输入用户名!' }]}>
                        <Input />
                    </Form.Item>

                    <Form.Item label="密码" name="password" rules={[{ required: true, message: '请输入密码!' }]}>
                        <Input.Password />
                    </Form.Item>

                    <Form.Item {...layout2}>
                        <div className="text-center">
                            <a href="/register">没有账号？去注册</a>
                        </div>
                    </Form.Item>

                    <Form.Item {...layout2}>
                        <Button className="w-100%" type="primary" htmlType="submit">
                            登录
                        </Button>
                    </Form.Item>
                </Form>
            </div>
        </div>
    )
}
